<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }"
    >
      <div class="logo"><h1>用户角色管理</h1></div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['4']">
        <a-menu-item key="1">
          <router-link to="/user">
            <a-icon type="user" />
            <span class="nav-text">用户信息</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/role">
            <a-icon type="solution" />
            <span class="nav-text">角色信息</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/userRole">
            <a-icon type="team" />
            <span class="nav-text">用户角色详情</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header
        :style="{ background: '#fff', padding: 0 }"
      ></a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'initial' }">
        <div
          :style="{ padding: '24px', background: '#fff', textAlign: 'center' }"
        >
          <!-- 指定组件的呈现位置 -->
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        <span>Copyright(c) 2004 , 2019 , 元年科技。</span>
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  name: "Layout",
};
</script>

<style>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.logo h1 {
  color: #fff;
  text-align: center;
}
</style>
